<template>
    <div class="songFunction">
               <span class="lyric" title="画中画歌词"></span>
                <span class="Collection" title="收藏"></span>
                <span class="share" title="分享"></span>   
 
               
               
    </div>
</template>

<script>
export default {
     name:'FooterSongFunction',

}
</script>

<style scoped>
  .songFunction {
      float: left;
  }
  .lyric {
    float: left;
    margin: 16px 2px 0 0;
    width: 25px;
    height: 25px;
    background: url(../images/lyric.png) no-repeat 0 0;
    cursor: pointer;
  }
  .lyric:hover {
      background: url(../images/lyric.png) no-repeat 0 -25px;
  }
  .Collection {
      float: left;
      margin: 16px 2px 0 0;
      width: 25px;
      height: 25px;
      background: url(../images/playbar.png) no-repeat -88px -163px;
      cursor: pointer;
  }
  .Collection:hover {
      background: url(../images/playbar.png) no-repeat -88px -189px;
  }
  .share {
      float: left;
      margin: 16px 2px 0 0;
      width: 25px;
      height: 25px;
      background: url(../images/playbar.png) no-repeat -114px -163px;
      cursor: pointer;
  }
  .share:hover {
      background: url(../images/playbar.png) no-repeat -114px -189px;
  }
  
</style>